<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script src="../vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <h1>人员列表</h1>
        <input type="text" placeholder="请输入你要搜索的人名" v-model="keyWord"> <br>
        <ul>
            <li v-for="(p,index) in filterPersons" :key="p.id">
                {{p.name}}---{{p.age}}---{{p.sex}}
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
                    el: "#app",
                    data: {
                        keyWord: "",
                        persons: [{
                                id: "001",
                                name: "kitty",
                                age: "18",
                                sex: "女",
                            },
                            {
                                id: "002",
                                name: "tom",
                                age: "18",
                                sex: "男",
                            },
                            {
                                id: "003",
                                name: "bob",
                                age: "18",
                                sex: "男",
                            },
                            {
                                id: "004",
                                name: "sanmu",
                                age: "18",
                                sex: "女",
                            },
                            {
                                id: "005",
                                name: "蔡徐坤",
                                age: "18",
                                sex: "女",
                            },
                        ],

                        //filterPersons:[],
                    },


                    //监听写法
                    // watch:{ 
                    //     //我要监听的keyWord
                    //     // keyWord(val){
                    //     //     console.log("keyWord被修改了",val);
                    //     //     this.persons=this.persons.filter((p) => { 
                    //     //         return p.name.indexOf(val) !== -1;
                    //     //      })
                    //     // }


                    //     //完整的写法
                    //     keyWord:{
                    //         //用了新数组必须加上
                    //         immediate:true,
                    //         handle(val){
                    //             this.persons=this.persons.filter((p) => { 
                    //              return p.name.indexOf(val) !== -1;
                    //           })
                    //         }
                    //     }
                    // },



                    computed: {
                        filterPersons() {
                            //没有set的时候,直接retur 就是结果
                            //以后在模板中,直接filterPersons 就是
                            return  this.persons.filter((p) =>
                                p.name.indexOf(this.keyWord) !== -1,

                            );
                        },
                    },
                    });
    </script>
</body>

</html>